{% extends "dash/dashboard.html" %}

{% load dash_filters %}

{% block myjavascript %}
    <script language="javascript" src="{{ STATIC_URL }}js/myutils.js"></script>
    <script src="{{ STATIC_URL }}js/tour/bootstrap-tour.js"></script>
    <script src="{{ STATIC_URL }}js/tour/user_main_notificacion.js"></script>
    <script src="{{ STATIC_URL }}js/tour/jquery.smoothscroll.js"></script>
{% endblock myjavascript %}

{% block mystylesheet-dashboard %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/styleMati.css" type="text/css" />
    <link href="{{ STATIC_URL }}css/tour/prism.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}css/tour/bootstrap-tour.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}css/tour/index.css" rel="stylesheet">
{% endblock mystylesheet-dashboard%}

{% block dashboard %}
<div class="row">
    <div class="page-header">
        <h1>Notificaciones</h1>
    </div>
    <div class="list-content-user-messages" id="notificaciones">
        <ul>
            {% for notificacion in notificaciones_recibidas %}
                <li class="content-user-messages">
                    <div class="user-message-image">
                        <img src="{{ notificacion.imagen.url }}" alt="Score">
                    </div>
                    <div class="user-message-name">
                        <a href="/social/ver_notificaciones/{{ notificacion.id }}">
                            {{ notificacion.nombre }}
                        </a>
                        {% if notificacion.estado != 'leido' %}
                            ({{ notificacion.estado }})
                        {% endif %}
                    </div>
                    <div class="message-user-fecha">
                Hasta: {{ notificacion.fecha_expiracion|date:"d/M/Y" }}
            </div>
                    <div class="user-message-name">
                        <!--<a href="/social/company_response_message/{{ message.id }}">-->
                            {{ notificacion.descripcion|truncatewords:30 }}
                        <!--</a>-->
                    </div>
                    <div class="user-message-last"></div>
                    <div class="clear"></div>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock dashboard %}
